<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<html>
    <link rel="stylesheet" href="/Public/Admin/css/bootstrap.min.css">
    <script src="/Public/Admin/js/jquery.js"></script>
    <script src="/Public/Admin/js/pintuer.js"></script>  
    <style>
        .modal-form{
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
}
.set-menubox{
    width: 100%;
    height: 370px;
    position: relative;
}
.set-menu-wrapper{
    width: 100%;
    background-color: white;
    overflow: hidden;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}
    .set-menu-bottom{
    width: 100%;
    position: absolute;
    bottom: 0;
    left:0;
    background-color: #f9f9f9;
    height: 40px;
    line-height: 37px;
    border-top: 1px solid #e8e7e7  ;
}
.set-menu-bottom-sec2{
    float: left;
    width: 33.33%;
    text-align: center;
    border-left: 1px solid #e8e7e7;
    position: relative;
}
.set-menu-bottom-sec1{
    float: left;
    width: 100%;
    text-align: center;
    border-left: 1px solid #e8e7e7;
    position: relative;
}
.set-menu-bottom-sec3{
    width: 33.33%;
    position: relative;
    float: left;
    text-align: center;
    border: 1px solid #f9f9f9 ;
    border-left: 1px solid #e8e7e7;
}
.set-menu-bottom-sec:nth-child(1){
    border-left: none;
}
.set-menu-bottom-tc{
    position: absolute;
    bottom: 65px;
    left: 50%;
    width: 80px;
    margin-left: -40px;
    border:1px solid #b1b1af ;
    min-height: 40px;
}
.set-menu-bottom-tc-row{
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 1px solid white;
    border-bottom: 1px solid #dddddd ;
}
.set-menu-bottom-tc-row:nth-last-child(1){
    border-bottom: none;
}
.set-menu-bottomimg{
    position: absolute;
    bottom: -5px;
    width: 10px;
    height: 5px;
    left: 50%;
    margin-left:-5px ;
}
.menu-site-right{
    width: 600px;
    min-height: 600px;
    border: 1px solid #dddddd;
    padding: 10px;
    float: left;
    margin-left: 20px;
}
/*.set-menu-wrapper-pro-text{
    float: left;
}*/
.menu-site-right-sec{
    width: 100%;
}
.menu-site-right-head{
    width: 100%;
    height: 125px;
    border:1px solid #dddddd ;
    padding: 10px;
}
.menu-site-right-head span,.menu-site-right-body span{
    font-weight: 600;
    font-size: 15px;
    color: #323232;
}
.menu-site-right-head-main{
    width: 100%;
    height: 80px;
    background-color: #f7f7f7;
    padding: 10px;
    overflow: hidden;
    margin-top: 5px;
}
.menu-site-right-head-main span,.menu-site-right-body-sec span{
    float: left;
    margin-top: 4px;
    display: inline-block;
    width: 60px;
    text-align: right;
    margin-right: 20px;
}
.menu-site-right-head-main div,.menu-site-right-body-sec div{
    float: left;
    margin-left: 10px;
    width: 440px;
}
.menu-site-right-head-main div input{
    width: 300px;
    border-radius: 3px;
    border: 1px solid #cdcdcd;
    height: 30px;
    line-height: 28px;
}
.menu-site-right-body{
    width: 100%;
    padding: 10px;
    position: relative;
    border:1px solid #dddddd ;
    margin-top: 15px;
}
.menu-site-right-body-main{
    width: 100%;
    background-color: #f7f7f7;
    padding: 10px;
    overflow: hidden;
    margin-top: 5px;
}
.menu-site-right-body-sec{
    width: 100%;
    overflow: hidden;
}
.menu-site-right-body-sec .menu-site-input{
    width: 300px;
    border-radius: 3px;
    border: 1px solid #cdcdcd;
    height: 30px;
    line-height: 30px;
    background-color: white;
}
.menu-site-input input{
    float: left;
    height: 28px;
    line-height: 28px;
    border: none;
    padding-left:10px ;
    width: 200px;
}
.menu-site-input button{
    float: right;
    height: 28px;
    line-height: 28px;
    border: none;
    color: white;
    background-color: #428bcb;
    text-align: center;
    min-width: 50px;
    padding: 0 7px;
}
.menu-site-right-body-sec div span{
    font-weight: 500;
    width: 100px;
    margin-right: 10px;
    text-align: left;
}
.menue-site-right-detail{
    width: 100%;
    border-top:1px solid #efefef ;
    margin-top: 15px;
    padding-top: 10px;
    margin-left: 0 !important;
}
.menue-site-right-detail p{
    float: left;
    width: 100%;
}
.menue-site-right-detail .menu-site-input{
    margin-left: 0 !important;
}
.menu-site-sub{
    text-align: right;
    margin-top: 20px;
}
.menu-site-sub button{
    float: right;
    height: 28px;
    line-height: 28px;
    border: none;
    color: white;
    background-color: #428bcb;
    text-align: center;
    min-width: 50px;
    padding: 0 7px;
}
.menu-site-close{
    position: absolute;
    right: -10px;
    top:-10px;
    width: 20px;
    height: 20px;
}
.menu-left-choose{
    border: 1px solid #008100 !important;
}
.menu-addimg{
    width: 10px;
    height: 10px;

}

    </style>
    <body>
<div class="set-menu-wrapper">
    

    <div class="menu-site-right">
        <div class="menu-site-right-sec">
            <div class="menu-site-right-head">
                <span>标题</span>
                <div class="menu-site-right-head-main">
                    <span>标题</span>
                    <div>
                        <input id="title" type="text">
                        <p>仅用于区分个性化菜单</p>
                    </div>
                </div>
            </div>
            <div class="menu-site-right-body">
                <img class="menu-site-close" src="__PUBLIC__/Admin/images/menuclose.png" alt="" onclick="btnreduce()"/>
                <span>菜单设置</span>
                <div class="menu-site-right-body-main">
                    <div class="menu-site-right-body-sec button">
                        <span>菜单名称</span>
                        <div class="menu-site-input">
                            <input id="name" value="菜单名称" type="text">
                            <button>按钮</button>
                        </div>
                    </div>
                    <div class="menu-site-right-body-sec sub_button">
                        <span>菜单动作</span>
                        <div>
                            <span style="width:500px">
                                <input id="type" name="type" type="radio" attribute="url" value="view"> 链接
                                <input id="type" name="type" type="radio" attribute="key" value="click"> 按钮
                            </span>
                            <div class="menue-site-right-detail">
                                <div class="menu-site-input">
                                    <input id="attribute"  type="text">
                                    <button>按钮</button>
                                </div>
                                <p>指定点击此菜单要执行的操作，你可以在这里输入关键字那么点击这个菜单时就相当于发送合格内容至系统</p>
                                <p style="font-weight: 600">在此处设置的文字回成为粉丝点击此按钮时公众号回复的消息</p>
                                <p style="font-weight: 600">在此处设置的URL必须以http://开头</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pro-textmain set-menu-wrapper-pro-text">
        <div class="app-header"></div>
        <div class="pro-textmain-box">
            <div class="title js-default-content">
                <h1>
                    <span></span>
                </h1>
            </div>
            <div class="set-menubox">
                <div class="set-menu-bottom">
                    <div class="set-menu-bottom-sec set-menu-bottom-sec2 menu-left-choose" menu="one" name="菜单名称" onclick="btnchoose(this)">
                        <span>菜单名称</span>
                        <div class="set-menu-bottom-tc">
                            <img class="set-menu-bottomimg" src="__PUBLIC__/Admin/images/xiajian.jpg" alt="" />
                            <div class="set-menu-bottom-tc-row" onclick="btnadd(this)">
                                <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" />
                            </div>
                        </div>
                    </div>
                    <div class="set-menu-bottom-sec set-menu-bottom-sec2 set-menu-add-c1">
                        <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> 添加菜单
                    </div>
                    <div id="identification" style="clear: both;"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div  style="clear: both;"></div>
    <div class="col-sm-12 menu-site-sub" style="float:left;margin-left:200px;">
        <button onclick="collatingData()" style="width:200px;">提交</button>
       
    </div>
</div>
<script>

    //底部添加按钮
    $(".set-menu-bottom").on("click",'.set-menu-add-c1', function() {
        var seclength = $(this).parent().find(".set-menu-bottom-sec").length;
        if (seclength == 2) {
            $(this).before('<div menu="one" class="set-menu-bottom-sec set-menu-bottom-sec3" name="菜单名称"  onclick="btnchoose(this)"><span>菜单名称</span><div class="set-menu-bottom-tc"> <img class="set-menu-bottomimg" src="__PUBLIC__/Admin/images/xiajian.jpg" alt="" /> <div class="set-menu-bottom-tc-row" onclick="btnadd(this)"> <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> </div></div></div>')
            $(this).parent().find(".set-menu-bottom-sec").removeClass("set-menu-bottom-sec2").addClass("set-menu-bottom-sec3");
        } else if (seclength == 3) {
            $(this).before('<div menu="one" class="set-menu-bottom-sec set-menu-bottom-sec3" name="菜单名称"  onclick="btnchoose(this)"><span>菜单名称</span><div class="set-menu-bottom-tc"> <img class="set-menu-bottomimg" src="__PUBLIC__/Admin/images/xiajian.jpg" alt="" /> <div class="set-menu-bottom-tc-row" onclick="btnadd(this)"> <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> </div></div></div>')
//            $(this).parent().find(".set-menu-bottom-sec").removeClass("set-menu-bottom-sec3").addClass("set-menu-bottom-sec3");
            $(this).remove();
        }
     });
     //赋值
     $('#name,#type,#attribute').change(function(){
        var selected = $('.menu-left-choose');
        selected.find(':first').html($('#name').val());
        selected.attr('name',$('#name').val());      // 赋值name
        var checked = $('input[type="radio"]:checked').val() ? $('input[type="radio"]:checked').val() : '';
        // 有子类
        selected.attr('type',checked);   // 赋值type
        if(checked){
            selected.attr($('input[type="radio"]:checked').attr('attribute'),$('#attribute').val());   // 赋值attribute属性
        }
        if(selected.attr('menu') === 'two'){
            var type_val = selected.parents('.set-menu-bottom-sec').attr('type');
            selected.parents('.set-menu-bottom-sec').removeAttr('type');
            type_val && selected.parents('.set-menu-bottom-sec').removeAttr($('input[type="radio"]:checked').attr('attribute'));
        }
     })

    var action = {view:'url',click:'key'};
    //按钮选择
    function btnchoose(obj) {
        $(".set-menu-bottom-sec,.set-menu-bottom-tc-row").removeClass("menu-left-choose");
        $(obj).addClass("menu-left-choose");
        if($(obj).attr('menu') === 'one' && $(obj).find('.set-menu-bottom-tc-row').size() > 1){
            $('.sub_button').hide();
        }else{
            $('.sub_button').show();
        }
        stopBubble();
        siteDate(obj)
    }
    function siteDate(obj){
        var text = $(obj).find(':first').html();
        var type = $(obj).attr('type');
        $("#name").val(text);
        $('input[type="radio"]').attr('checked',false);
        $('#attribute').val('');
        if(type){
            $('input[value="'+type+'"]').attr('checked',true);
            var attribute = $(obj).attr(action[type]);
            if(attribute){
                $('#attribute').val(attribute);
            }
        }
    }
    //上方添加按钮
    function  btnadd(obj) {
        var smallnum = $(obj).parent().find(".set-menu-bottom-tc-row").length;
        if (smallnum == 5) {
            $(obj).before('<div class="set-menu-bottom-tc-row" menu="two" onclick="btnchoose(this)" name="子菜单名称"><span>子菜单名称</span></div>');
            $(obj).remove();
        } else {
            $(obj).before('<div class="set-menu-bottom-tc-row" menu="two" onclick="btnchoose(this)" name="子菜单名称"><span>子菜单名称</span></div>');
        }
        var selected = $('.menu-left-choose');
        if(selected.attr('menu') === 'one' && selected.find('.set-menu-bottom-tc-row').size() > 1){
            $('.sub_button').hide();
        }else{
            $('.sub_button').show();
        }
        stopBubble();
    }
    //按钮删除
    function  btnreduce() {
        var selected = $(".menu-left-choose");
        var selected_parent = selected.parent();
        //二级按钮删除
        if(selected.attr('menu') == 'two'){
            selected.parents('.set-menu-bottom-sec').addClass('menu-left-choose');
            if(selected_parent.find('.set-menu-bottom-tc-row').size() == 5 && !selected.parent().find('.menu-addimg').size()){
                selected_parent.append('<div class="set-menu-bottom-tc-row" onclick="btnadd(this)"> <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> </div>');
            }
            selected.remove();
        //一级按钮删除
        }else if(selected.attr('menu') == 'one'){
            if($('div[menu="one"]').size() > 1){
                if($('div[menu="one"]').size() == 3){
                    $('#identification').before('<div class="set-menu-bottom-sec set-menu-bottom-sec3 set-menu-add-c1"><img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> 添加菜单</div>');
                }else if($('div[menu="one"]').size() == 2){
                    $('.set-menu-bottom-sec').removeClass('set-menu-bottom-sec3');
                    $('.set-menu-bottom-sec').addClass('set-menu-bottom-sec2');
                }
                selected.remove();
            }
        }
    }
    // 数据整理
    function collatingData(){
        var bool = true;
        var json_str = new Array();
        
        var title = $("#title").val();
        if(!title){
            alert('标题不能是空！~');
            return false;
        }
        
        $('div[menu="one"]').each(function(i,item){
            var button = {};
            var name = $(item).attr('name');
            if(!name){
                alert('一级标题不能是空！~');
                bool = false;
                return false;
            }
            if(name.length > 4){
                alert('一级标题最多4个汉字！~');
                bool = false;
                return false;
            }
            if($(item).find('div[menu="two"]').size()){
                button.name = name;
                button.sub_button = new Array();
                $(item).find('div[menu="two"]').each(function(j,jtem){
                    var sub_button_obj = {};
                    var name = $(jtem).attr('name');
                    var type = $(jtem).attr('type');
                    sub_button_obj.name = name;
                    sub_button_obj.type = type;
                    if(!name){
                        alert('二级标题不能是空！~');
                        bool = false;
                        return false;
                    }
                    if(name.length > 7){
                        alert('二级标题最多7个汉字！~');
                        bool = false;
                        return false;
                    }
                    if(!type){
                        alert(name + '类型未选择！~');
                        bool = false;
                        return false;
                    }
                    var attribute = $(jtem).attr(action[sub_button_obj.type]);
                    if(!attribute){
                        alert('请输入'+name+'执行操作地址！~');
                        bool = false;
                        return false;
                    }
                    sub_button_obj[action[sub_button_obj.type]]= attribute;
                    button.sub_button.push(sub_button_obj);
                });
                if(!bool){
                    return false;
                }
            }else{
                var type = $(item).attr('type');
                button.name = name;
                button.type = type;
                if(!type){
                    alert(name + '类型未选择！~');
                    bool = false;
                    return false;
                }
                var attribute = $(item).attr(action[button.type]);
                if(!attribute){
                    alert('请输入'+name+'执行操作地址！~');
                    bool = false;
                    return false;
                }
                button[action[button.type]]= attribute;
            }
            json_str.push(button);
        });
        if(!bool){
            return false;
        }
        var json = {button:json_str};
       
        $.ajax({
                url:"{:U('customMenu/createSetMenu')}",
                type:"post",
                data:{'json_str':json,'title':title},
         
                success:function (data){
                    alert(data.msg);
                    location.href = "{:U('CustomMenu/setMenuList')}";
                }
                
        });
    }
    function stopBubble(e) {
        window.event.cancelBubble = true;
    }
</script>
</body>
</html>



<SCRIPT Language=VBScript><!--

//--></SCRIPT>